<template>
    <div style="display:inline-block">
        <div class='form-group-enquire' style="display:inline-block"> 
            <Select v-model="searchData.searchDid" style="width:150px" placeholder="请选择商务主管" @on-change="changeDid()"  clearable filterable>
            <Option :value=row.Uid v-for="row in dList" :label="'('+row.Uid+')'+row.Name" :key=row.Uid><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Uid}})</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block"> 
            <Select v-model="searchData.searchBid" style="width:150px" placeholder="请选择商务" @on-change="changeBid()"  clearable filterable transfer>
                <Option :value=row.Uid v-for="row in bList" :label="'('+row.Uid+')'+row.Name" :key=row.Uid v-show="filterConsumer(row)"><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Uid}})</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="PartnerData.length>0">
            <Select v-model="searchData.searchPid" style="width:140px" placeholder="请选择渠道商" @on-change="changeCid()" clearable filterable transfer>
                <Option :value=row.Id v-for="row in PartnerData"  :label="'('+row.Id+')'+row.Name" :key="'partner_'+row.Id" v-show="filterPartner(row)"><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="ChannelData.length>0">
            <Select v-model="searchData.searchCid" placeholder="请选择渠道" @on-change="submitChange()"  clearable filterable transfer>
                <Option :value=row.Id v-for="row in ChannelData"  :label="'('+row.Id+')'+row.Name" :key="'partner_'+row.Id" v-show="filterChannel(row)"><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="AppData.length>0">
            <Select v-model="searchData.searchAid" style="width:250px" placeholder="请选择插件" @on-change="submitChange()"  clearable filterable transfer>
                <Option :value=row.Id v-for="row in AppData"  :label="'('+row.Id+')'+row.Name" :key="'partner_'+row.Id" v-show="filterApp(row)"><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="VersionData.length>0">
            <Select v-model="searchData.searchVid" style="width:140px" placeholder="请选择系统版本" @on-change="submitChange()"  clearable filterable transfer>
                <Option :value=row.Id v-for="row in VersionList"  :label="'('+row.Id+')'+row.Name" :key=row.Id><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="SdkVersionData.length>0">
            <Select v-model="searchData.searchSid" style="width:140px" placeholder="请选择SDK版本" @on-change="submitChange()"  clearable filterable transfer>
                <Option :value=row.Id v-for="row in SdkVersionList"  :label="'('+row.Id+')'+row.Name" :key=row.Id><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
        <div class='form-group-enquire' style="display:inline-block" v-if="PlugSdkTypeData.length>0">
            <Select v-model="searchData.searchPlugId" style="width:140px" placeholder="请选择插件类型" @on-change="submitChange()"  clearable filterable>
                <Option :value=row.Id v-for="row in PlugSdkTypeData" :label="'('+row.Id+')'+row.Name" :key=row.Id><span>{{row.Name}}</span><span style="float:left;color:#FF0000">({{row.Id}})&nbsp;</span></Option>
            </Select>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { mapGetters } from "vuex";
export default {
    name: "SearchUsers",
    props:{
        PartnerData:{
            type:Array,
            default:()=>{return []}
        },
        ChannelData:{
            type:Array,
            default:()=>{return []}
        },
        AppData:{
            type:Array,
            default:()=>{return []}
        },
        SdkVersionData:{
            type:Array,
            default:()=>{return []}
        },
        VersionData:{
            type:Array,
            default:()=>{return []}
        },
        ActiveData:{
            type:Array,
            default:()=>{return []}
        },
        PlugSdkTypeData:{
            type:Array,
            default:()=>{return []}
        },
        AppProviderData:{
            type:Array,
            default:()=>{return []}
        },
        BelongId:{
            type:Number,
            default:0,
        },
        DefaultRoleId:{
            type:Number,
            default:3,
        }
    },
    data(){
        return {
            searchData:{
                searchDid:-1,
                searchBid:-1,
                searchCid:-1,
                searchAid:-1,
                searchSid:-1,
                searchPlugId:-1,
                searchPid:-1,
                searchVid: -1
            },
        }
    },
    watch:{

    },
    computed:{
        ...mapGetters(["UserInfo","OpUserList","DirectorList","BusinessList"]),
        dList(){
            let list = [{"Uid":-1,"Name":"请选择商务主管"}].concat(this.DirectorList);
            return list;
        },
        bList(){
            let list = [{"Uid":-1,"Name":"请选择商务"}].concat(this.BusinessList);
            return list;
        },
        SdkVersionList() {
            let list = [{"Id":-1,"Name":"全部SDK版本"}].concat(this.SdkVersionData);
            return list;
        },
        VersionList() {
            let list = [{"Id":-1,"Name":"全部系统版本"}].concat(this.VersionData);
            return list;
        }
    },
    methods:{
        changeDid(){
            this.searchData.searchBid = -1;
            this.searchData.searchPid = -1;
            this.searchData.searchCid = -1;
            this.submitChange();
        },
        changeBid(){
            this.searchData.searchPid = -1;
            this.searchData.searchCid = -1;
            this.submitChange();
        },
        submitChange(){
            this.$emit("submitChange",this.searchData)
        },
        changeCid(){
            this.searchData.searchCid=-1;
            this.submitChange();
        },
        filterConsumer(item){
            if(item.Uid==-1){
                return true;
            }
            else if(this.searchData.searchDid==-1){
                return false;
            }else{
                return item.Leader==this.searchData.searchDid||item.Uid==this.searchData.searchDid;
            }
        },
        filterPartner(item){
            //  this.$nextTick(function () {
                if (item.Id == -1) return true;
                return (this.searchData.searchDid == -1 || this.searchData.searchDid == item.Did) && (this.searchData.searchBid == -1 || this.searchData.searchBid == item.Bid)
            //   });
        },
        filterChannel(item){
            //   this.$nextTick(function () {
                if (item.Id == -1) return true;
                return (this.searchData.searchDid == -1 || this.searchData.searchDid == item.Did) && (this.searchData.searchBid == -1 || this.searchData.searchBid == item.Bid) && (this.searchData.searchPid == -1 || this.searchData.searchPid == item.Pid)
            //  });
        },
    },
    mounted(){
        this.$nextTick(function () {
                this.$set(this.searchData, "searchBid", this.UserInfo.uid);
            });
            this.searchData.searchBid = this.UserInfo.uid
            let cnt = this.OpUserList.length;
            for(let i = 0;i<cnt;i++){
                if(this.OpUserList[i].Uid == this.UserInfo.uid){
                    this.$nextTick(function () {
                        this.$set(this.searchData, "searchDid", this.OpUserList[i]["Leader"]);
                    });
                    this.searchData.searchDid = this.OpUserList[i]["Leader"]
                    break;
                }
            }
        this.submitChange();
    }
}
</script>
  
